<template>
  <div class="greenhouse-info">
    <!-- 基本信息卡片组 -->
    <div class="info-cards">
      <div class="info-card">
        <div class="icon-wrapper">
          <el-icon><HomeFilled /></el-icon>
        </div>
        <div class="info-content">
          <div class="label">大棚名称</div>
          <div class="value">智能大棚1号</div>
        </div>
      </div>

      <div class="info-card">
        <div class="icon-wrapper">
          <el-icon><Aim /></el-icon>
        </div>
        <div class="info-content">
          <div class="label">占地面积</div>
          <div class="value">1000平方米</div>
        </div>
      </div>

      <div class="info-card">
        <div class="icon-wrapper">
          <el-icon><Location /></el-icon>
        </div>
        <div class="info-content">
          <div class="label">所在地址</div>
          <div class="value">云南大学呈贡校区</div>
        </div>
      </div>

      <div class="info-card">
        <div class="icon-wrapper">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="info-content">
          <div class="label">设备总数</div>
          <div class="value">{{ deviceList.length }}台</div>
        </div>
      </div>
    </div>

    <!-- 设备状态概览 -->
    <div class="device-overview">
      <div class="overview-header">
        <div class="title">
          <el-icon><Connection /></el-icon>
          <span>设备状态概览</span>
        </div>
      </div>

      <div class="status-cards">
        <div class="status-card">
          <div class="status-value">{{ deviceList.length }}</div>
          <div class="status-label">在线设备</div>
          <div class="status-icon online">
            <el-icon><Connection /></el-icon>
          </div>
        </div>
        <div class="status-card">
          <div class="status-value">0</div>
          <div class="status-label">离线设备</div>
          <div class="status-icon offline">
            <el-icon><WarningFilled /></el-icon>
          </div>
        </div>
        <div class="status-card">
          <div class="status-value">100%</div>
          <div class="status-label">设备在线率</div>
          <div class="status-icon rate">
            <el-icon><DataLine /></el-icon>
          </div>
        </div>
      </div>

      <!-- 设备网格视图 -->
      <div class="device-grid">
        <div v-for="device in deviceList" :key="device.serial" class="device-card">
          <div class="device-icon" :class="getDeviceIcon(device.type).class">
            <el-icon>
              <component :is="getDeviceIcon(device.type).icon"></component>
            </el-icon>
          </div>
          <div class="device-info">
            <div class="device-name">{{ device.name }}</div>
            <div class="device-serial">{{ device.serial }}</div>
            <div class="device-value">{{ device.value }}{{ device.unit }}</div>
            <div class="device-meta">
              <span class="type">{{ device.type }}</span>
            </div>
          </div>
          <div class="device-status">
            <el-tag 
              :type="device.status === '在线' ? 'success' : 'danger'"
              size="small"
              effect="dark"
            >
              {{ device.status }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  HomeFilled, 
  Aim, 
  Location, 
  Monitor, 
  Connection,
  WarningFilled,
  DataLine,
  Cpu,           // 土壤PH
  WindPower,     // CO2
  Sunny,         // 温度
  Cloudy,        // 湿度
  VideoCamera    // 摄像头
} from '@element-plus/icons-vue'

const deviceList = ref([
  {
    serial: '327061375295689606',
    name: '土壤PH检测器',
    type: 'SOIL_PH',
    unit: 'pH',
    value: 6.5,
    status: '在线'
  },
  {
    serial: '327061375295689610',
    name: '二氧化碳检测器',
    type: 'CO2',
    unit: 'ppm',
    value: 450,
    status: '在线'
  },
  {
    serial: '327061375295689611',
    name: '空气温度检测器',
    type: 'AIR_TEMPERATURE',
    unit: '℃',
    value: 25.5,
    status: '在线'
  },
  {
    serial: '327061375295689612',
    name: '空气湿度检测器',
    type: 'AIR_HUMIDITY',
    unit: '%',
    value: 65,
    status: '在线'
  },
  {
    serial: '327061375295689614',
    name: '土壤温度检测器',
    type: 'SOIL_TEMPERATURE',
    unit: '℃',
    value: 22,
    status: '在线'
  },
  {
    serial: 'AB9831171',
    name: '监控摄像头',
    type: 'CAMERA',
    unit: '-',
    value: '-',
    status: '在线'
  }
])

const getDeviceIcon = (type: string) => {
  const icons = {
    'SOIL_PH': { 
      icon: Cpu, 
      class: 'ph'
    },
    'CO2': { 
      icon: WindPower, 
      class: 'co2'
    },
    'AIR_TEMPERATURE': { 
      icon: Sunny, 
      class: 'temp'
    },
    'AIR_HUMIDITY': { 
      icon: Cloudy, 
      class: 'humidity'
    },
    'SOIL_TEMPERATURE': { 
      icon: Monitor, 
      class: 'soil-temp'
    },
    'CAMERA': { 
      icon: VideoCamera, 
      class: 'camera'
    }
  }
  return icons[type as keyof typeof icons] || { icon: Monitor, class: 'default' }
}
</script>

<style scoped lang="scss">
.greenhouse-info {
  padding: 20px;
  background: rgba(0,21,41,0.4);
  border-radius: 12px;
  border: 1px solid rgba(0,255,255,0.1);

  .info-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;

    .info-card {
      background: rgba(0,21,41,0.6);
      border-radius: 8px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      border: 1px solid rgba(0,255,255,0.1);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        border-color: rgba(0,255,255,0.3);
        box-shadow: 0 0 10px rgba(0,255,255,0.1);
      }

      .icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background: rgba(0,228,255,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00e4ff;
        font-size: 24px;
      }

      .info-content {
        flex: 1;

        .label {
          color: #7fdbff;
          font-size: 12px;
          margin-bottom: 4px;
        }

        .value {
          color: #00e4ff;
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
  }

  .device-overview {
    .overview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #7fdbff;
        font-size: 16px;
      }
    }

    .status-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 20px;

      .status-card {
        background: rgba(0,21,41,0.6);
        border-radius: 8px;
        padding: 16px;
        position: relative;
        border: 1px solid rgba(0,255,255,0.1);

        .status-value {
          font-size: 24px;
          font-weight: 600;
          color: #00e4ff;
          margin-bottom: 4px;
        }

        .status-label {
          color: #7fdbff;
          font-size: 14px;
        }

        .status-icon {
          position: absolute;
          right: 16px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 32px;
          opacity: 0.5;

          &.online { color: #52c41a; }
          &.offline { color: #ff4d4f; }
          &.rate { color: #1890ff; }
        }
      }
    }

    .device-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;

      .device-card {
        background: rgba(0,21,41,0.6);
        border-radius: 8px;
        padding: 16px;
        border: 1px solid rgba(0,255,255,0.1);
        display: flex;
        gap: 16px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          border-color: rgba(0,255,255,0.3);
          box-shadow: 0 0 10px rgba(0,255,255,0.1);
        }

        .device-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;

          .el-icon {
            font-size: 24px;
          }

          &.ph { 
            color: #ff4d4f;
            background: rgba(255,77,79,0.1);
          }
          &.co2 { 
            color: #ff7a45;
            background: rgba(255,122,69,0.1);
          }
          &.temp { 
            color: #ffa940;
            background: rgba(255,169,64,0.1);
          }
          &.humidity { 
            color: #1890ff;
            background: rgba(24,144,255,0.1);
          }
          &.soil-temp { 
            color: #52c41a;
            background: rgba(82,196,26,0.1);
          }
          &.camera { 
            color: #722ed1;
            background: rgba(114,46,209,0.1);
          }
        }

        .device-info {
          flex: 1;

          .device-name {
            color: #00e4ff;
            font-size: 16px;
            margin-bottom: 4px;
          }

          .device-serial {
            color: #7fdbff;
            font-size: 12px;
            margin-bottom: 8px;
          }

          .device-value {
            color: #00e4ff;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 4px;
          }

          .device-meta {
            display: flex;
            gap: 8px;
            
            .type {
              font-size: 12px;
              color: rgba(127,219,255,0.8);
            }
          }
        }

        .device-status {
          :deep(.el-tag) {
            background: transparent;
            border: 1px solid currentColor;

            &.el-tag--success {
              color: #52c41a;
            }

            &.el-tag--danger {
              color: #ff4d4f;
            }
          }
        }
      }
    }
  }
}
</style> 